<template>
  <apexchart ref="chart" width="100%" height="600" type="line" :options="options" :series="series"></apexchart>
</template>

<script>
import {reactive, toRefs} from "vue";
import {store as shared} from "@/components/chart/common/store";

export default {
  name: "LineAdwords",
  setup() {
    const state = reactive({
      series: [
        {
          name: "Music",
          data: [1, 15, 26, 20, 33, 27]
        },
        {
          name: "Photos",
          data: [3, 33, 21, 42, 19, 32]
        },
        {
          name: "Files",
          data: [0, 39, 52, 11, 29, 43]
        }
      ],
      options: {
        chart: {
          zoom: {
            enabled: false
          },
          dropShadow: {
            enabled: true,
            top: 3,
            left: 2,
            blur: 4,
            opacity: 1,
          }
        },
        stroke: {
          curve: 'smooth',
          width: 2
        },
        //colors: ["#3F51B5", '#2196F3'],
        title: {
          text: '标题',
          align: 'left',
          offsetY: 25,
          offsetX: 20
        },
        subtitle: {
          text: '副标题',
          offsetY: 55,
          offsetX: 20
        },
        markers: {
          size: 6,
          strokeWidth: 0,
          hover: {
            size: 9
          }
        },
        grid: {
          show: true,
          padding: {
            bottom: 0
          }
        },
        labels: ['01/15/2002', '01/16/2002', '01/17/2002', '01/18/2002', '01/19/2002', '01/20/2002'],
        xaxis: {
          tooltip: {
            enabled: false
          }
        },
        legend: {
          position: 'top',
          horizontalAlign: 'right',
          offsetY: -20
        }
      }
    })
    return {
      ...toRefs(state)
    }
  },
  data() {
    return {
      shared: shared
    }
  },
  watch: {
    'shared.darkMode': {
      handler() {
        this.$refs.chart.refresh()
      }
    }
  }
}
</script>

<style scoped>

</style>
